<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
	{% include 'common-css/css.html' %}
	<title>用户管理</title>
	<style type="text/css">
		a:hover {
			text-decoration: none;
		}
	</style>
</head>
<body>
<div class="div-main">
	<div>
		<div class="layui-form layui-form-pane">
			<div class="layui-row">
				<div class="layui-col-md4">
					<div class="layui-form-item">
						<label class="layui-form-label">手机号</label>
						<div class="layui-input-inline">
							<input type="text" id="phone" autocomplete="off" onkeyup="query()"
							       placeholder="请输入手机号" class="layui-input">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<table lay-filter="user_Info" id="user_InfoId">
		<thead>
		<tr>
			<th lay-data="{field:'user_name', width:240}">用户名</th>
			<th lay-data="{field:'status', width:150}">状态</th>
			<th lay-data="{field:'phone', width:150}">电话</th>
			<th lay-data="{field: 'last_login_time',sort: true, width: 200}">上次登录时间</th>
		</tr>
		</thead>
	</table>
	<div id="user_Page"></div>
</div>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}layui/layui.js"></script>
<script type="text/javascript">
	layui.use(['form', 'table', 'laypage'], function () {
		var form = layui.form, table = layui.table, laypage = layui.laypage;
		var tmpParams = {};
		var curr = 1;
		var pageNum = 8;

		load_data(tmpParams);
		function load_data(params) {
			params['limit'] = pageNum;
			params['start'] = (curr - 1) * pageNum;
			tmpParams = params;
			$.ajax({
				type: 'post',
				url: '/user/load_user_data',
				dataType: 'json',
				data: tmpParams,
				success: function (data) {
					table.init('user_Info', {
						width: 746,
						data: data.data
					});
					//分页
					laypage.render({
						elem: 'user_Page'
						, count: data.count
						, limit: pageNum
						, curr: curr
						, theme: '#999999'
						, jump: function (obj, first) {
							if (!first) {
								curr = obj.curr;
								load_data(params);
							}
						}
					});
				}
			});
		}

		/** input 模糊查询 **/
		query = function () {
			var phone = $('#phone').val();
			tmpParams = {phone: phone}
			load_data(tmpParams);
		}
	});
</script>
</body>
</html>